'use strict';

import React, {Component, PropTypes} from 'react';
import {Input, Popover,PopoverTrigger} from 'amazeui-react';

const RULES = {
	required: {
		regex: /\S+/,
		message: '必填',
	},
	password: {
		regex: /^\S{6,32}$/,
		message: '6~32位字符，不能填空格',
	},
	email: {
		regex: /^[\w!#$%&"*+/=?^_`{|}~-]+(?:\.[\w!#$%&"*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/,
		message: '邮箱格式如：xxx@xxx.xxx',
	},
	qq: {
		regex: /^[1-9][0-9]{4,}$/,
		message: '不少于4位数字的QQ号',
	},
	idcard: {
		regex: /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/,
		message: '18位身份证',
	},
	number: {
		regex: /^[0-9]*$/,
		message: '必须为数字',
	},
	mobile: {
		regex: /^1[34578]\d{9}$/,
		message: '11位手机号码',
	},
};

export default class ValidateInput extends Component {
	/*
	 * 构造函数。
	 * @param props 只读属性
	 */
	constructor(props) {
		super(props);
		this.state = {};
	}

	/*
	 * 验证。
	 */
	validate() {
		let rules = this.getRules();
		let value = this.refs.input.getValue();

		for (let i = 0; i < rules.length; i++) {
			if (!RULES[rules[i]].regex.test(value)) {
				return false;
			}
		}

		return true;
	}

	/*
	 * 获取输入值。
	 */
	getValue() {
		return this.refs.input.getValue();
	}

	/*
	 * 获取验证规则数组。
	 */
	getRules() {
		let rules = [];

		if (this.props.rules) {
			rules = this.props.rules.split('|');
		}

		return rules;
	}

	/*
	 * 获取输入说明。
	 */
	getMessages() {
		let rules = this.getRules();
		let messages = [];

		for (let i = 0; i < rules.length; i++) {
			messages.push(
				<span key={i}>{RULES[rules[i]].message}<br /></span>
			);
		}

		return messages;
	}

	/*
	 * 获取原始DOM节点。
	 * @return input DOM节点
	 */
	getFieldDOMNode() {
		return this.refs.input.getFieldDOMNode();
	}

	/*
	 * 改变时回调。
	 */
	handleChangeFile() {
		let validation = '';
		if (this.validate()) {
			validation = 'success';
		} else {
			validation = 'error';
		}
		this.setState({
			validation: validation
		});

		let value = this.refs.input.getValue();
		this.props.onChange(value);
	}

	/*
	 * 渲染视图。
	 */
	render() {
		return (
			<div style={{
				display: 'inline-block',
				width: this.props.width || '100%'
			}}>
				<PopoverTrigger
					placement="bottom"
					popover={
						<Popover>{this.getMessages()}</Popover>
					}
				>
					<Input 
						validation={this.state.validation}
						hasFeedback={this.props.hasFeedback}
						type={this.props.type}
						placeholder={this.props.placeholder}
						radius={this.props.radius}
						round={this.props.round}
						readOnly={this.props.readOnly}
						label={this.props.label}
						defaultValue={this.props.defaultValue}
						disabled={this.props.disabled}
						icon={this.props.icon}
						amSize={this.props.amSize}
						standalone={this.props.standalone}
						addonBefore={this.props.addonBefore}
						addonAfter={this.props.addonAfter}
						btnBefore={this.props.btnBefore}
						btnAfter={this.props.btnAfter}
						amStyle={this.props.amStyle}
						onChange={this.handleChangeFile.bind(this)}
						ref="input"
						className={this.props.className}
						style={this.props.style}
					/>
				</PopoverTrigger>
			</div>
		);
	}
}

ValidateInput.propTypes = {
	type: PropTypes.oneOf(['text','password','textarea','number']),
	placeholder: PropTypes.string,
	radius: PropTypes.bool,
	round: PropTypes.bool,
	readOnly: PropTypes.bool,
	label: PropTypes.string,
	defaultValue: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number,
	]),
	disabled: PropTypes.bool,
	icon: PropTypes.string,
	amSize: PropTypes.oneOf(['sm','lg']),
	standalone: PropTypes.bool,
	addonBefore: PropTypes.any,
	addonAfter: PropTypes.any,
	btnBefore: PropTypes.any,
	btnAfter: PropTypes.any,
	amStyle: PropTypes.string,
	rules: PropTypes.string,
	onChange: PropTypes.func,
	style: PropTypes.object,
	className: PropTypes.string,
	width: PropTypes.number,
	hasFeedback: PropTypes.bool,
};
ValidateInput.defaultProps = {
	type: 'text',
	onChange: value => {},
	hasFeedback: true,
};
